<template>
<van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
  <img alt="Vue logo" src="./assets/logo.png">
  <h1 @click="sayHello">{{name}}-{{age}}</h1>
  <h3>{{job.type}}-{{job.salary}}</h3>
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import {ref, reactive} from 'vue'
import HelloWorld from './components/HelloWorld.vue'
// 原始代码
import { Button } from 'vant';

export default {
  name: 'App',
  components: {
    HelloWorld,
    [Button.name]: Button
  },
  setup(){
    let name = "codezm";
    // 定义响应式数据
    // 引用对象（引用实现的实例对象)
    // reference implement
    let age = ref(18);
    let job = ref({
      type: '前端工程师',
      salary: '30k'
    })
    // let person = reactive({
    //   name: 'codezm',
    //   age: 18,
    // })

    console.log(age);
    function sayHello(){
      age.value = 20;
      job.value.type = '后端工程师';
      alert(`${name}...test`);
    }

    return {
      name: name,
      age,
      job,
      sayHello
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
